a{
    &:hover{
        text-decoration: none !important;
    }
}
.wrap{
    border: 1px solid #dbdbdb;
    padding: 10px 15%;
    .shopping-status{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .shooping-progress{
            display: flex;
            align-items: center;
            >i{
                margin-right: 10px;
            }
            >p{
                margin: 0;
                margin-right: 10px;
            }
            .shopping-division{
                width: 100px;
                height: 1px;
                background: #cfcfcf;
            }
            .checked{
                color: #c10000;
            }
            .unchecked{
                color: #cfcfcf;
            }
        }
        .con-shopping{
            color: #333;
            &:hover{
                text-decoration: none;
            }
        }
    }
}
main{
    width: 70%;
    margin: 10px auto;
    .container{
        display: flex;

        // section内容样式
        section{
            margin-right: 20px;
            
            .section-title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #dbdbdb;
                >p{
                    font-style: 14px;
                    color: #333333;
                    margin-bottom: 10px;
                }
                >a{
                    display: block;
                    margin-bottom: 10px;
                    font-size: 12px;
                    color: #333333;
                }
            }
            .order-info{
                display: flex;
                flex-wrap: wrap;
                .info{
                    border: 1px solid #dbdbdb;
                    margin-top: 20px;
                    margin-right: 30px;
                    width: 240px;
                    transition: all linear 0.3s;
                    .info-title{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px;
                        .titlel{
                            display: flex;
                            align-items: center;
                            >p{
                                font-size: 13px;
                                color: #333333;
                                margin: 0;
                            }
                            >span{
                                font-size: 12px;
                                color: #333333;
                            }
                        }
                        .titler{
                            height: 12px;
                            display: flex;
                            align-items: center;
                            >a{
                                margin: 0;
                                padding: 0 5px;
                                font-size: 12px;
                                display: block;
                                color: #333333;
                            }
                            .infol{
                                border-right: 1px solid #b3b3b3;
                            }
                            .infor{
                                border-left: 1px solid #d7d7d7;
                            }
                        }
                    }
                    .info-content{
                        background: #f5f5f5;
                        >p{
                            margin: 0;
                            padding: 16px 5px;
                            font-size: 12px;
                            color: #333;
                        }
                    }
                    &:hover{
                        border-color: #c10000;
                    }
                }
                
            }
            .pm-title{
                border-bottom: 1px solid #dbdbdb;
                margin: 10px 0;
                padding: 10px 0;
            }
            .paymethod{
                display: flex;
                >div{
                    font-size: 12px;
                    width: 120px;
                    height: 50px;
                    margin: 20px 20px 20px 0;
                    border: 1px solid #dbdbdb;
                    transition: all linear 0.3s;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    >p{
                        font-size: 12px;
                    }
                    &:hover{
                        border-color: #c10000;
                    }
                }
            }
            // 地址模态框
            .modal-content{
                width: 300px;
                padding: 20px;
                >input{
                    outline: none;
                    padding: 5px;
                    height: 30px;
                    margin: 5px 0;
                    &::-webkit-input-placeholder{
                        font-size: 12px;
                        color: #337ac3;
                    }
                    &::-moz-input-placeholder{
                        font-size: 12px;
                        color: #337ac3;
                    }
                }
                .address-select{
                    display: flex;
                    .form-control{
                        width: 40%;
                        height: 30px;
                        margin: 5px 10px 5px 0;
                        padding: 5px;
                        font-size: 12px;
                        color: #337ac3;
                        font-weight: 600;
                    }
                }
                .address-modalhr{
                    width: 100%;
                }
                .btns{
                    display: flex;
                    justify-content: space-around;
                    .addressbtn{
                        width: 100px;
                        height: 40px;
                        border-radius: 3px;
                        border: none;
                        font-size: 12px;
                    }
                    .address-modalsave{
                        color: #fff;
                        background: #da0000;
                    }
                    .address-modalcancel{
                        color: #000;
                        border: 1px solid #d3d3d3;
                    }
                }
            }
        }

        //article样式
        article{
            width: 500px;
            .order-content{
                padding: 5px;
                background: #f5f5f5;
                .article-title{
                    display: flex;
                    justify-content: space-between;
                    >p{
                        font-style: 14px;
                        color: #333333;
                    }
                    >a{
                        font-size: 12px;
                        color: #333333;
                    }
                }
                .wares-list{
                    display: flex;
                    align-items: center;
                    padding: 5px;
                    height: 100px;
                    border-top: 1px solid #dbdbdb;
                    .des{
                        padding: 5px;
                        >p{
                            font-size: 12px;
                            margin-bottom: 10px;
                            font-weight: 600;
                            color: #000;
                        }
                        >span{
                            margin: 10px 0;
                            display: block;
                            font-size: 10px;
                            color: #808080;
                        }
                    }
                    >p{
                        font-size: 12px;
                        color: #333333;
                    }
                }
            }
            .money{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                color: #333333;
                margin: 5px;
            }
            .intotal{
                border-top: 1px solid #dbdbdb;
                .order-total{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 5px 0;
                    >p{
                        margin: 0;
                        font-size: 14px;
                        color: #333333;
                    }
                    >span{
                        font-size: 14px;
                        color: #c10000;
                    }
                }
                button{
                    width: 100%;
                    height: 30px;
                    border: none;
                    color: #fff;
                    font-size: 12px;
                    background: #c10000;
                }
            }
        }
    }
}